WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > Tutorials > MVVM > Tutorial 04b - Adding Zooming, Panning to a Chart with MVVM
Tutorial 04b - Adding Zooming, Panning to a Chart with MVVM

Adding Zooming, Panning Behavior in MVVM

Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.

Zooming, Panning behavior can be added as belfore, by defining a group of ChartModifiers in XAML. 

Add this code to your SciChartSurface in the MainWindow.xaml. This code delcares a set of ChartModifiers and binds IsEnabled to properties in the MainViewModel

XAML for ChartModifiers
Copy Code 
...
<s:SciChartSurface>
    ...
    <s:SciChartSurface.ChartModifier>
        <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)-->
        <s:ModifierGroup>
            <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}" />
            <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None" />
            <s:ZoomExtentsModifier/>
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
    ...
</s:SciChartSurface>

Next, add the following properties to your MainViewModel code as well:

Properties to add to MainViewModel.cs
Copy Code 
...
private bool _enableZoom = true;
public bool EnableZoom
{
    get { return _enableZoom; }
    set
    {
        if (_enableZoom != value)
        {
            _enableZoom = value;
            OnPropertyChanged("EnableZoom");
            if (_enableZoom) EnablePan = false;
        }
    }
}
private bool _enablePan;
public bool EnablePan
{
    get { return _enablePan; }
    set
    {
        if (_enablePan != value)
        {
            _enablePan = value;
            OnPropertyChanged("EnablePan");
            if (_enablePan) EnableZoom = false;
        }
    }
}

To wire it all up, we need two checkboxes to bind to EnablePan and EnableZoom as well. We will be able to use them to toggle between the Zoom and Pan modifier. Add the following code so that your MainView.xaml looks like this.

MainWindow.xaml showing ChartModifier checkboxes
Copy Code 
<Window x:Class="SciChart.Mvvm.Tutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SciChart.Mvvm.Tutorial"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="550" Width="800">

    <Window.Resources>
        <local:MainViewModel x:Key="MainViewModel"/>
    </Window.Resources>

    <Grid DataContext="{StaticResource MainViewModel}">
       
        <!-- New code here. Add RowDefinitions -->
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- New code here: Add controls to toggle between zoom and pan -->
        <StackPanel Orientation="Horizontal" Background="#333">
            <CheckBox Margin="5" Foreground="#FFF" Content="Enable Zoom?" IsChecked="{Binding EnableZoom, Mode=TwoWay}"/>
            <CheckBox Margin="5" Foreground="#FFF" Content="Enable Pan?" IsChecked="{Binding EnablePan, Mode=TwoWay}" />
        </StackPanel>

        <!-- Don't forget to add Grid.Row=1 -->
        <s:SciChartSurface Grid.Row="1"
                            RenderableSeries="{s:SeriesBinding RenderableSeries}">
                            ChartTitle="{Binding ChartTitle}"
            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)-->
                <s:ModifierGroup >
                    <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}" />
                    <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None" />
                    <s:ZoomExtentsModifier/>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>
    </Grid>
</Window>

Now run the application, you should be able to toggle between Zoom and Pan mode and drag on the chart to zoom. You can also double click to zoom extents!